<template>
  <view>
    <view class="acc-con">
      <!-- <view class="acc-list flexrow borderbot">
				<view>
					<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/add.png" mode="aspectFill"></image>
				</view>
				<view class="acc-list-right">
					<view >棉签</view>
					<view class="flexrow flexbetween fontsize14 margintop2">
						<view class="color999">500支/包</view>
						<view>x1</view>
					</view>
					<view class="color3FA fontw margintop6">¥10.00</view>
				</view>
			</view>
			<view class="acc-list flexrow borderbot">
				<view>
					<image src="https://applet.youtuyiliao.com/profile/upload/xiaochengxu/static/add.png" mode="aspectFill"></image>
				</view>
				<view class="acc-list-right">
					<view >棉签</view>
					<view class="flexrow flexbetween fontsize14 margintop2">
						<view class="color999">500支/包</view>
						<view>x1</view>
					</view>
					<view class="color3FA fontw margintop6">¥10.00</view>
				</view>
			</view> -->
      <view class="acc-list flexrow borderbot" v-for="(item, index) in MaterielProductList" :key="index">
        <view>
          <image :src="baseUrl + item.thumbnail" mode="aspectFill"></image>
        </view>
        <view class="acc-list-right">
          <view>{{ item.title || "" }}</view>
          <view class="flexrow flexbetween fontsize14 margintop2">
            <view class="color999">{{ item.norm || "" }}</view>
            <view>x{{ item.amount || 0 }}</view>
          </view>
          <view class="color3FA fontw margintop6">¥{{ item.price || 0 }}</view>
        </view>
      </view>
    </view>
    <view class="totlalbtn flexrow flexbetween">
      <view>
        <!-- 	<view class="fontsize12">价格18元，金币抵消15元</view> -->
        <view class="color3FA fontsize14">合计：{{ totalmoney || 0 }}元</view>
      </view>
      <view class="mybtn">
        <template v-if="MaterielProductList[0] && MaterielProductList[0].state == 1">
          <my-button borderRadius="8" height="80" width="232" @click="handleScanCode">
            扫码支付
          </my-button>
        </template>
        <template v-if="MaterielProductList[0] && MaterielProductList[0].state == 2">
          <my-button background="#EAEAEA" color="#999999" borderRadius="8" height="80" width="232" hoverClass="none">
            已付款
          </my-button>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getMaterielProductByOrderNumber
} from '../../../api/index.js'
import MyButton from "@/chronicDisease/components/my-button/my-button.vue";
export default {
  components: {
    MyButton
  },
  data() {
    return {
      orderNumber: '',
      MaterielProductList: [], //辅料清单
      baseUrl: "",
      totalmoney: 0, //总金额
    }
  },
  onLoad(options) {
    this.baseUrl = this.$store.state.chronic.baseUrl;
    if (options.orderNumber) {
      this.orderNumber = options.orderNumber;
      this._getMaterielProductByOrderNumber();
    }

  },
  methods: {
    _getMaterielProductByOrderNumber() {
      getMaterielProductByOrderNumber({
        orderNumber: this.orderNumber
      }).then(res => {
        let total = 0;
        this.MaterielProductList = res.data;
        this.MaterielProductList.forEach(item => {
          total += item.sumPrice
        });
        this.totalmoney = total;
      })
    },
    handleScanCode() {
      uni.scanCode({
        success: (res) => {
          console.log('条码内容：' + res.result);
        }
      })
    }
  }
}
</script>

<style lang="scss">
.acc-con {
  width: 100%;
  padding: 0 40rpx 200rpx;

  .borderbot {
    border-bottom: 2rpx solid #f7f7f7;
  }

  .acc-list {
    height: 220rpx;

    image {
      width: 140rpx;
      height: 140rpx;
      margin-right: 28rpx;
    }

    .acc-list-right {
      width: calc(100% - 248rpx);

      .margintop6 {
        margin-top: 12rpx;
      }

      .margintop2 {
        margin-top: 4rpx;
      }
    }
  }
}

.totlalbtn {
  width: 100vw;
  padding: 22rpx 48rpx;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.12);

  >view {
    width: 100%;
  }

  .mybtn {
    position: relative;
    right: -50rpx;

    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 16rpx;
    }
  }
}
</style>